古いrails Frontend業務システムにFigmaで作ったVariables製デザイントークンを導入する
前提知識
該当システムの性質
レンダリング
Ruby on RailsでSSR Server Side Renderingしている。
erbとcss onlyなページ
更にJavaScriptでHydration ハイドレーションしているページ
基本的には、React製のDOMを重ねている感じ。
verion: rails 6系の古いアプリケーション
webpackerで、フロントエンドアセットを作っている。
webpackは、4系
※rails 6系なので、Tailwind CSS利用できない。
Motivation
該当システムは、複数のデザインが入り混じっている
デザイン、実装共にややこしい。
共通のDesign Tokens、共通Component コンポーネント code利用できないので、生産性低い。
イメージ
app
base
古くてあまりメンテされていない。
featureCat
baseをimportして新規にデザインを実装
featureDog
baseをimportして新規にデザインを実装
扱いにくくて、後日、featureCatをimportして上書き
※3つに、project class、component class、utility classがある。各所で利用していたりもする。
簡単なデザイン実装をnot Frontendが実装出来るようにしたい。
BEがFEまでまとめて実装することがあったり、デザイナーすら入っていないこともあるが、その際にデザイン、実装を0ベースで作るのしんどい。
FEでもProject classやComponent classがややこしいと感じている。
FLOCSSで実装されているのだけど、業務システムである以上、命名や機能が複雑化しやすい。
結果的に似たようなProject classが乱立している。
解決方針
該当システムは、複数のデザインが入り混じっている
共通のDesign Tokensを表現したCSS Custom Propertiesを用意して、component classやproject classで利用する
なぜ、component classやproject classを使うのか？いっそ、Utility Firstにしてもいいのでは？
システム制約上、
安易なTailwind CSS導入をすると、
code: c-modal.scss
.c-modal {
// componentのtokenは、custom prop内で定義を想定
--modal-max-width: 550px;
--modal-spacing-x: var(--primitive-token-spacing-3);
--modal-spacing-y: var(--primitive-token-spacing-16);
position: fixed;
top: var(--modal-spacing-y);
bottom: var(--modal-spacing-y);
width: 100%;
max-width: var(--modal-max-width);
...
}
簡単なデザイン実装をnot Frontendが実装出来るようにしたい。その際にデザイン、実装を0ベースで作るのしんどい。
共通のDesign Tokensを利用した、utility classを用意しておき、簡単なデザインであれば、それだけで実装出来るようにする。
code: UploadModal.scss
...
// 簡単なスタイルであれば、utilityでで書いてしまうことを想定。
<div className="u-flex u-flex-column u-gap-y-4 u-px-6">
{}
</div>
具体想定ユースケース
FEが担当するような複雑UI
共通コンポーネントの実装や大きな機能実装を想定しているので、project classやcomponent classの実装を想定
簡単なLayoutや意匠は、utility classで実装を想定
BEが担当するような簡単なUI
FEは、どこかのコピペで出来ることを想定
デザイン要求などで、少しデザインを変える場合は、utility classを利用することを想定。
使いこなせるなら、component classやproject classを作ってみても良い。
具体実装
1. Variables FigmaでDesign Tokensを定義
デザイナーと話し合って、ベースとなる、Design Tokensを作る。
注意事項やポイント
すべての命名をkebab-caseで作成
jsやcssを挟む際に処理で止まる場合があるから。
&といった特殊文字も命名に利用しない。
2. Figmaのプラグイン hogeで、デザイントークンのjsonを出力